import React, { PureComponent } from 'react'
import { Text, View ,TouchableOpacity,Image,StyleSheet} from 'react-native'
import Separator from './Separator'
import { Heading3,Paragraph} from './Text'
export default class DetailCeil extends PureComponent {
  render() {
      let { image,title,subtitle,style} = this.props;
      let IconElement  = image&&( <Image style={styles.icon} source={image} />)
    return (
      <TouchableOpacity >
       <View  style={[styles.container,style]}>
           {IconElement }
            <Heading3>{title}</Heading3>
            <View style={{flex:1}}  />
            <Paragraph style={{color:'999999'}} > {subtitle}</Paragraph>
            <Image style={styles.arrow} source={require('../img/public/cell_arrow.png')} />
       </View>
      
       <Separator />

      </TouchableOpacity>
    )
  }
}

const  styles = StyleSheet.create({
    container :{
        backgroundColor: 'white',
        height:44,
        flexDirection: 'row',
        alignItems: 'center',
        paddingLeft: 5,
        paddingRight: 5,
    },
    icon:{
        width:25,
        height:25,
        marginRight: 10,


    },
    arrow:{
        width:15,
        height:15,
        marginLeft: 5,
    }
})